// Tooltip 指令
// 用于在表格单元格内容溢出时显示完整内容的 tooltip

export default {
  mounted(el) {
    // 检查元素内容是否溢出
    const checkOverflow = () => {
      return el.scrollWidth > el.clientWidth;
    };

    let tooltip = null;

    const showTooltip = (e) => {
      // 只有当内容溢出时才显示 tooltip
      if (!checkOverflow()) return;

      // 创建 tooltip 元素
      tooltip = document.createElement('div');
      tooltip.className = 'cell-tooltip';
      tooltip.textContent = el.textContent;
      document.body.appendChild(tooltip);

      // 计算位置
      const rect = el.getBoundingClientRect();
      const tooltipRect = tooltip.getBoundingClientRect();
      
      let left = rect.left + (rect.width - tooltipRect.width) / 2;
      let top = rect.bottom + 10;

      // 防止 tooltip 超出屏幕
      if (left + tooltipRect.width > window.innerWidth) {
        left = window.innerWidth - tooltipRect.width - 10;
      }
      if (left < 10) {
        left = 10;
      }

      tooltip.style.left = `${left}px`;
      tooltip.style.top = `${top}px`;

      // 添加淡入动画
      setTimeout(() => {
        if (tooltip) {
          tooltip.style.opacity = '1';
          tooltip.style.transform = 'translateY(0)';
        }
      }, 10);
    };

    const hideTooltip = () => {
      if (tooltip) {
        tooltip.style.opacity = '0';
        tooltip.style.transform = 'translateY(-5px)';
        setTimeout(() => {
          if (tooltip && tooltip.parentNode) {
            tooltip.parentNode.removeChild(tooltip);
          }
          tooltip = null;
        }, 200);
      }
    };

    // 添加样式
    el.style.cursor = 'help';
    
    // 绑定事件
    el.addEventListener('mouseenter', showTooltip);
    el.addEventListener('mouseleave', hideTooltip);

    // 保存清理函数
    el._tooltipCleanup = () => {
      el.removeEventListener('mouseenter', showTooltip);
      el.removeEventListener('mouseleave', hideTooltip);
      hideTooltip();
    };
  },

  unmounted(el) {
    if (el._tooltipCleanup) {
      el._tooltipCleanup();
    }
  }
};

